<template>
  <div class="lee-local" :style="rootStyle">
    <div ref="box" class="lee-local-box animated">
      <img class="lee-local-avatar" :src="avatar" alt="橙续缘" />
      <p>{{ $store.getters.lang[8] }}</p>
      <p>{{ $store.getters.lang[9] }}</p>
    </div>
  </div>
</template>

<script>
import 'animate.css';

export default {
  name: 'LeeSectionTwo',
  data() {
    return {
      bgImg: this.$store.state.asset.images.BgImg1,
      avatar: this.$store.state.asset.images.Avatar,
    };
  },
  computed: {
    rootStyle() {
      const style = {
        backgroundImage: `url(${this.bgImg})`,
      };
      return style;
    },
  },
  methods: {

    async onShow({ elm }) {
      if (elm !== this.$el) {
        this.$refs.box.classList.add('fadeOutRight');
        this.$refs.box.classList.remove('fadeInLeft');
      } else {
        this.$refs.box.classList.add('fadeInLeft');
        this.$refs.box.classList.remove('fadeOutRight');
      }
    },
  },
  async mounted() {
    this.$evts.on('fullpage#scroll', this.onShow);
  },
};
</script>

<style lang="less" scoped>
.lee-local {
  position: relative;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: brightness(.6);

  &-box {
    @w: 750px;
    width: @w;
    position: relative;
    color: #fff;

    p {
      margin: 20px 0 0;
      font-size: 18/16em;
      text-indent: 34/16em;
      line-height: 30px;
    }
  }

  &-avatar {
    @w: 180px;
    width: @w;
    height: @w;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 4px #eee;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 20px #337ab7;
    }
  }
}
</style>
